<template>
  <template v-for="p in menu">
    <el-menu-item v-if="!p.children" :index="p.index">
      <!-- 图标 -->
      <el-icon>
        <component :is="p.icon"></component>
      </el-icon>
      <!-- 内容 -->
      <span>{{ p.title }}</span>
    </el-menu-item>
    <el-sub-menu v-else :index="p.index">
      <template #title>
        <!-- 图标 -->
        <el-icon>
          <component :is="p.icon"></component>
        </el-icon>
        <!-- 内容 -->
        <span>{{ p.title }}</span>
      </template>
      <my-menu :menu="p.children"></my-menu>
    </el-sub-menu>
  </template>
  <!-- 基本结构 -->
  <!-- 
     el-menu 容器
      el-menu-item 子项
      el-sub-menu 展开子项
        #title 展开子项标题
        el-menu-item 展开的每一个子项
     
    -->
</template>

<script setup lang="ts">
import type { MENU } from "@/types/permission"
import myMenu from "./myMenu.vue"

const { menu } = defineProps<{ menu: MENU[] }>()
</script>

<style></style>
